<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/cr/ui.html">
<link rel="import" href="chrome://resources/html/cr/ui/command.html">
<link rel="import" href="chrome://resources/html/util.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-announcer/iron-a11y-announcer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
<link rel="import" href="chrome://downloads/browser_proxy.html">
<link rel="import" href="chrome://downloads/constants.html">
<link rel="import" href="chrome://downloads/i18n_setup.html">
<link rel="import" href="chrome://downloads/item.html">
<link rel="import" href="chrome://downloads/search_service.html">
<link rel="import" href="chrome://downloads/toolbar.html">

<!--
<link rel="import" href="chrome://downloads/checkbox.html">
-->
<dom-module id="downloads-manager">
    <template>
        <style include="cr-hidden-style">
            :host {
                display: flex;
                flex: 1 0;
                flex-direction: column;
                height: 100%;
                overflow: hidden;
                z-index: 0;
            }

            @media screen and (max-width: 1024px) {
                :host {
                    flex-basis: calc( var(--downloads-card-width) + 2 * var(--downloads-card-margin));
                }
            }

            #toolbar {
                position: relative;
                z-index: 1;
            }

            #drop-shadow {
                @apply --cr-container-shadow;
            }

            :host([has-shadow_]) #drop-shadow {
                opacity: var(--cr-container-shadow-max-opacity);
            }

            #downloads-list {
                /* TODO(dbeam): we're not setting scrollTarget explicitly, yet
         * style="overflow: auto" is still being set by <iron-list>'s JS. Weird.
       
            display: flex;
       flex-direction: column;
         */
                overflow-y: overlay !important;

            }

            #no-downloads,
            #downloads-list {
                flex: 1;
            }

            :host([loading]) #no-downloads,
            :host([loading]) #downloads-list {
                display: none;
            }

            #no-downloads {
                align-items: center;
                color: #6e6e6e;
                display: flex;
                font-size: 123.1%;
                font-weight: 500;
                justify-content: center;
                /* To avoid overlapping with the header, we need this min-height
         * until bug 596743 is fixed. */
                min-height: min-content;
            }

            #no-downloads .illustration {
                background: -webkit-image-set( url(chrome://downloads/1x/no_downloads.png) 1x,
                url(chrome://downloads/2x/no_downloads.png) 2x) no-repeat center center;
                height: 144px;
                /* Matches natural image height. */
                margin-bottom: 32px;
            }

             /* 下载导航 */

      .download-header {
      width: 50%;
      background-color: #FFFFFF;
      margin: 0 0 0 25%;;
    }

    .logotitle {
      height: 44px;
      line-height: 44px;
      width: 100%;
      border-bottom: 1px solid #ccc;
    }

    .longliutitle {
      font-weight: bold;

      text-align: left;
      margin-left: 2%;
      cursor: pointer;
    }

    .downloadType {
      padding: 1% 106px 1% 150px;
      width: 100%;
      display: flex;
      flex: none;
      box-sizing: border-box;
    }

    .fileInput {
      margin-left: 20px;
      height: 256px;
      overflow: hidden;
      font-size: 300px;
      position: absolute;
      right: 0;
      top: 0;
      opacity: 0;
      filter: alpha(opacity=0);
      cursor: pointer;
    }

    .typeborderBt {
      position: relative;
      display: inline-block;
      overflow: hidden;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding-top: 10px;
      padding-left: 10px;
      padding-right: 10px;
      margin-left: -140px;
    }

    .typeborderurl {
      border: 1px solid #ddd;
      padding: 9px;
      border-bottom-left-radius: 3px;
      border-top-left-radius: 3px;
      margin-left: 30px
    }

    .typeborderinput {
      padding-top: 12px;
      padding-bottom: 10px;
      outline: none;
      border: 1px solid #ddd;
      border-radius: 4px;
      margin-left: 10px;
      width: 100%;
      padding-left: 10px;
      box-sizing: border-box;
    }

    .downloadBtn {
      padding: 10px;
      margin-left: 10px;
      border-radius: 4px;
      border: 1px solid rgb(220, 222, 226);
      color: #1a73e8;
      cursor: pointer;
      margin-right: -96px;
    }

    .downloadBtn:hover{
      color: #ffffff;
      background: rgba(26,115,232,0.8);
    }

    .download-bt_type {
      width: 50%;
      margin: 0% 0 0 25%;
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      background: white;
      border-radius: 3px;
      padding: 0.5% 0;
    }

    .download-bt_type span label {
      font-size: 14px;
      padding: 0 25px;
    }
        </style>

        <downloads-toolbar id="toolbar" spinner-active="{{spinnerActive_}}" role="none">
        </downloads-toolbar>
        <downloads-input id="downloadsinput"></downloads-input>
        <div class="download-header">
            <div class="logotitle">
              <h3 class="longliutitle">洪流下载</h3>
            </div>
            <div class="downloadType">
          
              <div class="typeborderBt">
                            <span>
                               <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg
                              t="1533268828919" class="icon"  viewBox="0 0 1024 1024" version="1.1"
                              xmlns="http://www.w3.org/2000/svg" p-id="4001" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
                              height="14"><defs><style type="text/css"></style></defs><path
                              d="M912.486 452.041v0h-687.071c-25.518 0-47.091 16.669-54.521 39.729v0l-59.946 184.682v-510.65h286.299c0 63.238 51.229 114.467 114.471 114.467v0h286.236v114.469h57.229v-114.469c0-31.588-25.639-57.236-57.229-57.236h-286.304c-31.586 0-57.234-25.645-57.234-57.231v0c0-31.589-25.58-57.234-57.234-57.234v0h-286.236c-31.587 0-57.234 25.646-57.234 57.234v686.941c0 31.589 25.646 57.229 57.234 57.229h686.943c25.518 0 47.091-16.663 54.521-39.729h0.063l117.116-360.974c0.001-31.587-25.516-57.169-57.106-57.234v0zM800.864 852.747h-689.914l111.498-343.471h689.909l-111.494 343.471z"
                              p-id="4002"></path></svg>
                              <input class="fileInput" id="file_jquery" type="file" on-change="file_jquery" name="" value="BT文件">
                              BT导入文件
                            </span>
              </div>
              
          
              </span>
              <input class="typeborderinput" name="url" id="urlinput" placeholder="请输入磁力链下载链接">
              <span type="button" class="downloadBtn" on-click="startDownload">开始下载</span>
          
            </div>
            
          </div>
        <div class="download-bt_type">
            <span style="color: royalblue ;margin-left: 2% ;font-size: 18px">
                下载任务列表
            </span>
            <span>
                <!-- 下载的BT类型集合 -->
                <template is="dom-repeat" items="[[downloadBTUrls]]" >
                    <label>
                        <!-- 每条item数据 :checked勾选 点击 -->
                        <input type="checkbox"  on-click="onCheckedDownloadType" checked >{{item.typeName}}
                    </label>
                </template>                    
            </span>  
        </div>
        <!-- <div> $i18n{downloadLocation}</div> -->
        <div id="drop-shadow"></div>

        <iron-list id="downloads-list" items="[[items_]]" onCancelTap_="[[onCancelTap_]]" hidden="[[!hasDownloads_]]">
            <template>
                <div hidden="[[!item.active]]">
                    <downloads-item data="[[item]]"></downloads-item>
                </div>
            </template> 
        </iron-list>
        <div id="no-downloads" hidden="[[hasDownloads_]]">
            <div>
                <div class="illustration"></div>
                <span>[[noDownloadsText_(inSearchMode_)]]</span>
            </div>
        </div>
        <a id="http_download" href="" style="display: none;">下载</a>
    </template>
    <script src="chrome://downloads/moment.min.js"></script>
    <script src="chrome://downloads/webtorrent.min.js"></script>
    <script src="chrome://downloads/manager.js"></script>
    <!-- <script src="chrome://chrome://resources/polymer/components/webcomponentsjs/webcomponents-lite.min.js"></script> -->
    <script>
        window.addEventListener('WebComponentsReady', function (e) {
            console.log('kkkkkkkkkkkkkkk');
            var el = document.getElementById("downloaditem");
            console.log(el);
            el.addEventListener("kick", function (e) {
                alert(e.detail.data);
            });
        });
  //   HTMLImports.whenReady(function () {

  // });
    </script>
</dom-module>